<template>
    <div>
        <MyHeader  :title="'TabBar 案例'"></MyHeader>
        <!-- 这里是动态组件显示的部分 -->
        <div class="main">
            <component :is="comName"></component>
        </div>
        <MyTabBar :arr='tabList' @changecomfn='changecomfn'></MyTabBar>
    </div>
  
</template>

<script>
/*
    1.把头组件拿过来直接用 组件复用
    2.完成底部复用组件
    3.底部点击高亮
    4.点击底部切换组件 动态组件 子传父 父里改显示的组件
    5.商品列表插槽 使用axios获取数据渲染页面 渲染页面用插槽技术
    6.解决标签的问题用插槽作用域
    7.删除 数据是在goodslist中的在goodslist中完成功能 招下标删除
    8.添加input和button标签 形成互斥 使用v-if else 当点击标签让其隐藏 让输入框显示
    8.1:自动会焦 自定义指令
    8.2:失去焦点让input框消失 使用blur事件监听input
    8.3双向绑定input 注:v-module 本质上是要一个变量和输入框相关联 监听输入框值 只要是个变量就行
    8.4enter事件让输入框内容添加到tags上
    8.5使用esc事件清空输入框
*/
import MyHeader from './components/MyHeader.vue'
import MyTabBar from './components/MyTabBar.vue'
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/MyUserInfo.vue'
export default {
    components:{
      MyHeader,
      MyTabBar,
      MyGoodsList,
      MyGoodsSearch,
      MyUserInfo
    } ,
    data(){
        return {
            comName:'MyGoodsList',//默认显示的组件
            // 底部数据
            tabList: [
                {
                    iconText: "icon-shangpinliebiao",
                    text: "商品列表",
                    componentName: "MyGoodsList"
                },
                {
                    iconText: "icon-sousuo",
                    text: "商品搜索",
                    componentName: "MyGoodsSearch"
                },
                {
                    iconText: "icon-user",
                    text: "我的信息",
                    componentName: "MyUserInfo"
                }
            ]
        }
    },
    methods:{
        changecomfn(name){
            this.comName=name
        }
    }
}
</script>

<style scoped>
.main{
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>